import * as echarts from 'echarts';
import { useEffect } from 'react';




const LineChart = () => {
    useEffect(()=>{
        var chartDom = document.getElementById('line-chart');
        var myChart = echarts.init(chartDom,'dark');
        var option;
        window.addEventListener("resize", () => {
          myChart.resize();
        });
        const colors = ['#5470C6', '#EE6666'];
        option = {
            backgroundColor:'',
          color: colors,
          tooltip: {
            trigger: 'none',
            axisPointer: {
              type: 'cross'
            }
          },
          legend: {},
          grid: {
            top: 70,
            bottom: 50
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: colors[0]
                }
              },
              axisPointer: {
                label: {
                  formatter: function (params) {
                    return (
                      '历史人流量 ' +
                      params.value +
                      (params.seriesData.length ? '：' + params.seriesData[0].data : '' +
                      '万人')
                    );
                  }
                }
              },
              // prettier-ignore
              data: ['2022-1', '2022-2', '2022-3', '2022-4', '2022-5', '2022-6', '2022-7', '2022-8', '2022-9', '2022-10', '2022-11', '2022-12']
            },
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: colors[1]
                }
              },
              axisPointer: {
                label: {
                  formatter: function (params) {
                    return (
                      '预测人流量  ' +
                      params.value +
                      (params.seriesData.length ? '：' + params.seriesData[0].data : '' )+
                      '万人'
                    );
                  }
                }
              },
              // prettier-ignore
              data: ['2022-1', '2022-2', '2022-3', '2022-4', '2022-5', '2022-6', '2022-7', '2022-8', '2022-9', '2022-10', '2022-11', '2022-12']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          dataZoom: [
            
            {
              type: 'inside',
              start: 0,
              end: 100
            },
            {
            
              height:30,
              bottom:3,
              start: 0,
              end: 100
            }
          ],
          textStyle: {
            color:"white"//标签文字颜色改为白色
            },
          series: [
            {
              itemStyle:{
                normal:{
                    color:'red'
                }
              },
              selectedMode:false,
              name: '预测',
              type: 'line',
              xAxisIndex: 1,
              smooth: true,
              
              emphasis: {
                focus: 'series'
              },
              data: [
                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 55.4, 18.4, 10.3, 0.7
              ]
            },
            {
              name: '历史人流量',
              type: 'line',
              smooth: true,
              emphasis: {
                focus: 'series'
              },
              data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2]
            }
          ]
        };
        option && myChart.setOption(option);
    })
    return(
        <div id='line-chart' style={{width:'100%',height:'100%'}}>

        </div>
    )
}
export default LineChart